<!--
TODO 修改描述
@description xx管理首页界面
@author 潘志勇
-->
<template>
  <a-card :bordered="false">
    <advance-search-panel @search="onSearch"/>
    <a-row class="basic-search-panel" :gutter="16">
      <a-col class="search-item" :md="4" :sm="24">
        <a-button block type="primary" @click="onOpenAddEditView({modal:ADD_EDIT_MODAL.ADD})">
          {{ $t('ui:comm:opt:add') }}
        </a-button>
      </a-col>
      <a-col class="search-item" :md="3" :sm="24">
        <a-button type="dashed" block @click="searchTableData()">{{ $t('ui:comm:opt:refresh') }}</a-button>
      </a-col>
    </a-row>

    <a-table
      :columns="columns"
      :rowKey="record => record.id"
      :dataSource="tableDataSource"
      :pagination="tablePagination"
      :loading="tableDataLoading"
      @change="onTableChange"
      size="middle"
    >
      <template slot="#" slot-scope="text, record, index">
        {{ computeIdx(index) }}
      </template>
      <!-- TODO 请修改列定义 -->
      <template slot="action" slot-scope="text, record">
        <a @click="onOpenAddEditView({modal:ADD_EDIT_MODAL.EDIT,record})">{{ $t('ui:comm:opt:edit') }}</a>
        <a-divider type="vertical"/>
        <a-popconfirm :title="$t('ui:comm:del:confirm')" @confirm="onDelete(record)">
          <a>{{ $t('ui:comm:opt:del') }}</a>
        </a-popconfirm>
      </template>
    </a-table>
    <add-edit-mgr ref="AddEditMgr" @addSuc="onAddSuc" @editSuc="onEditSuc"></add-edit-mgr>
  </a-card>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { DEFAULT_TABLE_PAGINATION, ADD_EDIT_MODAL } from '@/utils/GlobalConstant'
import AntUtil from '@/utils/AntdUtil'
import AddEditMgr from './add-edit-mgr'
import AdvanceSearchPanel from './advance-search-panel'

// TODO 请修改store的名称空间
const storeNamespace = 'crud01'
export default {
  name: 'LanguageMgr',
  components: {
    AddEditMgr,
    AdvanceSearchPanel
  },
  data () {
    return {
      ADD_EDIT_MODAL,
      // TODO 请修改列定义
      columns: [
        {
          title: '#',
          width: 80,
          scopedSlots: { customRender: '#' }
        },
        {
          title: () => this.$t('ui:comm:name'),
          dataIndex: 'name'
        },
        {
          title: () => this.$t('ui:comm:code'),
          dataIndex: 'code'
        }, {
          title: () => this.$t('ui:comm:create-time'),
          dataIndex: 'createTime'
        }, {
          title: () => this.$t('ui:comm:edit-time'),
          dataIndex: 'editTime'
        }, {
          title: () => this.$t('ui:comm:action'),
          key: 'action',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 查询关键词
      kw: ''
    }
  },
  computed: {
    ...mapState({
      // 表格分页参数
      tablePagination: state => state[storeNamespace].tablePagination,
      // 表格分页数据
      tableDataSource: state => state[storeNamespace].tableDataSource,
      // 表格数据加载状态
      tableDataLoading: state => state[storeNamespace].tableDataLoading
    })
  },
  created () {
    this.searchTableData()
  },
  methods: {
    ...mapActions(storeNamespace, ['loadTableData$', 'delete$']),
    /**
     * 监听添加成功事件
     */
    onAddSuc () {
      // 新增成功, 刷新下当前界面
      this.searchTableData()
    },
    /**
     * 监听编辑成功事件
     */
    onEditSuc () {
      // 编辑成功, 刷新下当前界面
      this.searchTableData()
    },
    /**
     * 计算表格行索引值
     * @param rowIndex 行号(从0开始)
     */
    computeIdx (rowIndex) {
      return ((AntUtil.getAntdPaginationPageNO(this.tablePagination) - 1) * AntUtil.getAntdPaginationSize(this.tablePagination)) + rowIndex + 1
    },
    /**
     * 组装其它自定义的查询条件
     */
    buildOtherSearchCondition () {
      // TODO 请修改自定义搜索条件
      return { kw: this.kw }
    },
    /**
     * 查询表格数据
     * @param pagination 分页条件[可选]
     **/
    searchTableData (pagination) {
      let realPagination = this.tablePagination
      if (pagination) {
        realPagination = pagination
      }
      // 调用store中的方法, 从服务器获取数据
      this.loadTableData$({ pagination: realPagination, otherCdt: this.buildOtherSearchCondition() })
    },
    /**
     * 监听表格的分页,过滤,排序条件改变
     * @param pagination 分页条件
     * @param filters 过滤条件
     * @param sorter 排序条件
     */
    onTableChange (pagination, filters, sorter) {
      this.searchTableData(pagination)
    },
    /**
     * 监听新增/编辑按钮点击事件(打开新增/编辑界面)
     * @param {string} modal 模式. 可选值:add/edit
     * @param record 行数据(可选)
     */
    onOpenAddEditView ({ modal, record }) {
      this.$refs.AddEditMgr.open({ modal, record })
    },
    /**
     * 监听搜索框监听事件
     * @param 搜索关键词
     * @param 事件对象
     */
    onSearch (value, event) {
      console.log('高级查询条件:', value)
      this.searchTableData(DEFAULT_TABLE_PAGINATION)
    },
    /**
     * 监听删除操作事件
     * @param rowData 行数据
     */
    onDelete (rowData) {
      const _this = this
      this.delete$(rowData.id).then(() => {
        // 数据表格刷新
        _this.searchTableData()
      })
    }
  }
}
</script>

<style scoped>

</style>
